<template>
  <div class="h-screen min-h-screen max-h-screen flex flex-col">
    <header class="bg-white dark:bg-gray-800 shadow">
      <nav class="container mx-auto px-4 py-4">
        <div class="flex justify-between items-center">
          <NuxtLink
            to="/"
            class="text-xl font-bold text-gray-900 dark:text-white"
          >
            我的博客
          </NuxtLink>
          <div class="space-x-4">
            <NuxtLink
              to="/"
              class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
            >
              首页
            </NuxtLink>
            <NuxtLink
              to="/blog"
              class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
            >
              博客
            </NuxtLink>
            <NuxtLink
              to="/components"
              class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
            >
              组件
            </NuxtLink>
          </div>
        </div>
      </nav>
    </header>

    <main class="flex-grow overflow-auto">
      <div class="container mx-auto px-4 py-6">
        <slot />
      </div>
    </main>

    <footer class="bg-white dark:bg-gray-800 shadow">
      <div class="container mx-auto px-4 py-6">
        <div class="text-center text-gray-600 dark:text-gray-400">
          <p>© {{ new Date().getFullYear() }} 我的博客. All rights reserved.</p>
          <div class="mt-2 space-x-4">
            <a
              href="#"
              class="hover:text-gray-900 dark:hover:text-white transition-colors"
            >
              关于
            </a>
            <a
              href="#"
              class="hover:text-gray-900 dark:hover:text-white transition-colors"
            >
              联系方式
            </a>
            <a
              href="#"
              class="hover:text-gray-900 dark:hover:text-white transition-colors"
            >
              GitHub
            </a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
// 布局组件的逻辑
</script>

<style>
html {
  @apply bg-gray-50 dark:bg-gray-900;
}

body {
  @apply text-gray-900 dark:text-gray-100;
}
</style>
